<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: rgb(111, 111, 111);
            border: 2px solid;
            font-size: 2em;
        }
    </style>
</head>

<body>
    <button onclick="test()">按钮</button>
    <input type="button" value="按钮1" id="btn1">
    <input type="button" value="按钮2" id="btn2">

    <div class="box"></div>

    <script src="../../JS基础/utils.js"></script>
    <script>
        //----- 事件注册的方式
        //DOM0级的注册方式
        // eleNode.onclick=事件函数
        // 特点：
        // 1.兼容性好 
        // 2.同一元素同一类型事件只能注册一个事件处理函数，后面的会把前面的覆盖掉
        let btn1 = document.getElementById('btn1');

        btn1.onclick = function () {
            console.log('第一次绑定的点击事件');
        }
        btn1.onclick = function () {
            console.log('第二次绑定的点击事件');
        }


        // 内嵌 不推荐使用
        function test() {
            console.log(111);
        }

        //DOM2级的注册事件方式
        //事件类型前面没有on
        //第三个参数可选，默认是false冒泡，true是捕获
        //通常来说我们更加关注的是事件冒泡阶段，很少使用事件捕获
        // eleNode.addEventListener('事件类型',事件函数,布尔值)

        //特点：
        // 1.W3C推荐的标准方式
        // 2.可以为同一个元素添加多个同类型事件处理函数，按照注册顺序执行
        // 3.IE9˙之前不支持这种写法

        let btn2 = document.getElementById('btn2');
        btn2.addEventListener('click', function () {
            console.log('第二个事件监听函数');
        })
        btn2.addEventListener('click', function () {
            console.log('第一个事件监听函数');
        })

        // ----- 删除事件
        //DOM0级删除事件 box.onclick = null;
        let box = document.getElementsByClassName('box')[0];
        let count = 3;
        // box.onclick = function () {
        //     box.style.backgroundColor = 
        //     `rgb(${createRandom(255)}, ${createRandom(255)}, ${createRandom(255)})`
        //     count--;
        //     if (count <= 0) {
        //         //删除事件
        //         box.onclick = null;
        //     }

        // }

        //DOM2级
        // box.removeEventListener('click',clickHandle);
      
        let clickHandle = function (event) {
            debugger;
            let colorArr = ['red', 'blue', 'green', 'pink', 'purple', 'yellow', 'orange', 'orangered']
            box.style.backgroundColor = colorArr[createRandom(0, colorArr.length - 1)]
            let str = box.style.backgroundColor;
            console.log(str);
            if (str == 'red') {
                box.removeEventListener('click', clickHandle);
            }

        }
        box.addEventListener('click', clickHandle)




    </script>

</body>

</html>